<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <script th:src="@{/main/js/jquery-2.1.3.min.js}"></script>
    <script type="text/javascript" th:src="@{/main/layui/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/main/css/myinfo.css}">
    <link rel="stylesheet" th:href="@{/main/layui/css/layui.css}">
    <script th:src="@{/main/layui/layui.js}" charset="utf-8"></script>
    <script th:src=" @{/main/js/axios.min.js}"></script>
    <script>
        layui.use('flow', function() {
            var flow = layui.flow;
            flow.load({
                elem: '.orders-pager' //流加载容器
                , done: function (page, next) { //执行下一页的回调
                    console.log("当前页数为"+page);
                    console.log("下一页为"+next);
                    //模拟数据插入
                    setTimeout(function () {
                        var lis = [];
                        axios({
                            method: 'POST',
                            url: '/order/getOrders',
                            params: {
                                page:page,
                                pageSize:5
                            }
                        }).then(function (res) {
                            let data = res.data;
                            console.log(data)
                            layui.each(data,function (index, item) {

                            })
                        })
                        for (var i = 0; i < 8; i++) {
                            let img = '../../main/images/movie/ed93d2ad-b437-4f96-bbab-0a78804743c6.jpg';
                            lis.push('<div class="order-main">' +
                                ' <img class="img" src="'+img+'" alt="">' +
                                '<div class="order-info">' +
                                '<h1>《熊出没之原始时代》</h1>' +
                                '<div class="hall com">演出位置：</div>' +
                                '<div class="seat-list com">' +
                                '订购座位：<span class=""></span>' +
                                '</div>' +
                                '<div class="watch-time com">演出时间：</div>' +
                                '<div class="generate-time com">下单时间：</div>' +
                                '<div class="pay-time com">支付时间：<span></span></div>' +
                                '</div>' +
                                '<div class="amount"><span class="layui-icon layui-icon-rmb"></span>116</div>' +
                                '<div class="status">支付成功</div>' +
                                '</div>')
                        }
                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < 10); //假设总页数为 10
                    }, 500);
                }
            });
        })
    </script>
</head>
<body>
<div th:replace="common :: header"></div>
<div class="container" id="app">
    <div class="content">
        <div class="main">
            <div class="info-content clearfix">
                <div class="user-profile-nav" style="position:absolute">
                    <h1>个人中心</h1>
                    <a th:href="@{/myorders}" class="orders active">我的订单</a>
                    <a th:href="@{/profile}" class="profile ">基本信息</a>
                </div>
                <div class="orders-container">
                    <div class="profile-title">我的订单</div>
                    <div class="orders-pager">
                        <!--<div class="order-main">
                            <img class="img" th:src="@{/main/images/movie/熊出没之原始时代.jpg}" alt="">
                            <div class="order-info">
                                <h1>《熊出没之原始时代》</h1>
                                <div class="hall com">演出位置：</div>
                                <div class="seat-list com">
                                    订购座位：<span class=""></span>
                                </div>
                                <div class="watch-time com">演出时间：</div>
                                <div class="generate-time com">下单时间：</div>
                                <div class="pay-time com">支付时间：<span></span></div>
                            </div>
                            <div class="amount"><span class="layui-icon layui-icon-rmb"></span>116</div>
                            <div class="status">支付成功</div>
                        </div>
                        <div class="order-main">
                            <img class="img" th:src="@{/main/images/movie/熊出没之原始时代.jpg}" alt="">
                            <div class="order-info">
                                <h1>《熊出没之原始时代》</h1>
                                <div class="hall com">演出位置：</div>
                                <div class="seat-list com">
                                    订购座位：<span class=""></span>
                                </div>
                                <div class="watch-time com">演出时间：</div>
                                <div class="generate-time com">下单时间：</div>
                                <div class="pay-time com">支付时间：<span></span></div>
                            </div>
                            <div class="amount"><span class="layui-icon layui-icon-rmb"></span>116</div>
                            <div class="status">支付成功</div>
                        </div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>